<template>
  <div id="echarts2"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts2()
  },
  created() {},
  methods: {
    showEcharts2() {
      let myChart = this.$echarts.init(document.getElementById('echarts2'))
      // let color = ['rgb(54,142,243)', 'rgb(2,217,217)', 'rgb(255,237,91)', 'rgb(255,158,91)', 'rgb(84,95,255)']
      let color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05'] //2个以上的series就需要用到color数组

      // let angle = 0 //角度，用来做简单的动画效果的
      let data1 = this.data
      // let title = '办件量'
      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      // function getCirlPoint(x0, y0, r, angle) {
      //   let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
      //   let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
      //   return {
      //     x: x1,
      //     y: y1,
      //   }
      // }
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g
        return num.toString().replace(reg, ',')
      }
      let total = data1.reduce((a, b) => {
        return a + b.value * 1
      }, 0)
      let option = {
        color: color,
        tooltip: {
          trigger: 'item',
        },
        // title: [
        //   {
        //     text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
        //     top: 'center',
        //     left: '35%',
        //     textStyle: {
        //       rich: {
        //         name: {
        //           fontSize: 16,
        //           fontWeight: 'normal',
        //           color: 'rgb(132,159,186)',
        //           align: 'center',
        //           padding: [0, 0, 5, 0],
        //         },
        //         val: {
        //           fontSize: 26,
        //           fontWeight: 'bold',
        //           color: 'rgb(61,153,252)',
        //           padding: [0, 10, 0, 15],
        //         },
        //         // c: {
        //         //   fontSize: 15,
        //         //   fontWeight: 'normal',
        //         //   color: 'rgb(132,159,186)',
        //         // },
        //       },
        //     },
        //   },
        // ],
        legend: {
          orient: 'vertical',
          icon: 'rect',
          x: '68%',
          y: 'center',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 8,
          width: '100%',
          textStyle: {
            color: '#fff',
            fontSize: 12,
            padding: [5, 0, 5, 0],
          },
          formatter: function (name) {
            let data = option.series[0].data
            // console.log(data, 'data')
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            let v = tarValue
            //计算出百分比
            let p = Math.round((tarValue / total) * 100) + '%'
            return `${name}年 ${v}`
            //name是名称，v是数值
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '85%'],
            center: ['35%', '45%'],
            data: data1,
            hoverAnimation: false,
            itemStyle: {
              // normal: {
                borderColor: 'rgb(0,34,69)',
                borderWidth: 3,
              // },
            },
            labelLine: {
              // normal: {
                show: false,
                length: 20,
                length2: 120,
                lineStyle: {
                  color: '#e6e6e6',
                },
              // },
            },
            label: {
              // normal: {
                show: false,
                formatter: (params) => {
                  return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}'
                },
                padding: [0, -100, 25, -100],
                rich: {
                  icon: {
                    fontSize: 16,
                  },
                  name: {
                    fontSize: 14,
                    padding: [0, 10, 0, 4],
                    color: '#666666',
                  },
                  value: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333333',
                  },
                },
              // },
            },
          },
          {
            name: '', //外圆环
            tooltip: {
              show: false,
            },
            type: 'pie',
            radius: ['92%', '93%'],
            center: ['35%', '45%'],
            hoverAnimation: false,
            itemStyle: {
              // normal: {
                label: {
                  show: false,
                  color: 'white',
                },
              // },
            },
            data: [
              {
                value: 50,
                name: '',
                itemStyle: {
                  // normal: {
                    color: ' #274C80',
                    opacity: 0.5,
                  // },
                },
              },
            ],
          },
          // {
          //   name: '', //下方绿点
          //   type: 'custom',
          //   coordinateSystem: 'none',
          //   renderItem: function (params, api) {
          //     let x0 = (31 * api.getWidth()) / 90
          //     let y0 = api.getHeight() / 2.97
          //     let r = Math.min(api.getWidth(), api.getHeight()) / 2
          //     let point = getCirlPoint(x0, y0, r, 90 + -angle)
          //     return {
          //       type: 'circle',
          //       shape: {
          //         cx: point.x,
          //         cy: point.y,
          //         r: 3,
          //       },
          //       style: {
          //         stroke: '#274C80', //粉
          //         fill: '#274C80',
          //       },
          //       silent: true,
          //     }
          //   },
          //   data: [0],
          // },
          // {
          //   name: '', //上方绿点
          //   type: 'custom',
          //   coordinateSystem: 'none',
          //   renderItem: function (params, api) {
          //     let x0 = (31 * api.getWidth()) / 88
          //     let y0 = api.getHeight() / 1.51
          //     let r = Math.min(api.getWidth(), api.getHeight()) / 2
          //     let point = getCirlPoint(x0, y0, r, 270 + -angle)
          //     return {
          //       type: 'circle',
          //       shape: {
          //         cx: point.x,
          //         cy: point.y,
          //         r: 3,
          //       },
          //       style: {
          //         stroke: '#274C80', //绿
          //         fill: '#274C80',
          //       },
          //       silent: true,
          //     }
          //   },
          //   data: [0],
          // },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
